<template>
	<view class="login_page">
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<NavBar>
			<view slot="left" class="btn-back" @click="backIndex">
				<image src="../../static/img/common/left-arrow.svg" alt="" />
			</view>
			<view slot="center">用户登录</view>
		</NavBar>

		<view class="logo">
			<image style="width: 50vw;height: 50vw;" src="../../static/img/logo/mall.svg" alt="" />
		</view>


		<input class='input' type="text" v-model="username" minlength="3" maxlength="10" name="username" placeholder="请输入用户名" />
		<input class='input' type="password" v-model="password" minlength="6" maxlength="18" placeholder="请输入密码" />
		<view id="login_Btn" :class="btnIsActive" @click="login">
			<span>登录</span>
		</view>
		<view id="register_Btn">
			<span @click="register">未有账户?点此注册</span>
		</view>
	</view>
</template>

<script>
	import NavBar from "components/common/NavBar/NavBar"

	import {
		loginIn,
		setUserInfo
	} from "common/localStorage";
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";

	import {
		updateCart,
		getUserCart,
		getUserCollection,
		getUserViewed,
	} from "network/user";

	import {
		Login
	} from "network/login";

	export default {
		components: {
			NavBar
		},
		data() {
			return {
				username: "",
				password: "",
			};
		},
		computed: {
			...mapGetters(["cartIsEmpty"]),
			...mapState(["viewedList", "shopList", "collectionList"]),

			btnIsActive() {
				return this.isUsernameValid && this.isPasswordValid ?
					"btn_active" :
					"btn";
			},
			isUsernameValid() {
				return this.username.length;
			},
			isPasswordValid() {
				return this.password.length;
			},

		},
		methods: {
			...mapMutations([
				"setLogin",
				"addShop",
				"syncCart",
				"syncCollection",
				"syncViewed",
				"setUserInfo",
			]),
			login() {
				Login({
					username: this.username,
					password: this.password
				}).then(
					async (res) => {
						if (res[1].data?.tag) {
							let token = res[1].data.data.token;
							loginIn(token);

							this.setLogin(true);

							this.getUserCart();
							this.getUserCollection();
							this.getUserViewed();

							setUserInfo({
								nickname: res[1].data.data.nickname
							});
							this.setUserInfo({
								nickname: res[1].data.data.nickname
							});
							this.success('登录成功');
							this.toMy();
						} else {
							this.error('用户名或密码错误');
						}
					}
				);
			},
			backIndex() {
				uni.switchTab({
					url: "/pages/home/Home"
				})
			},
			register() {
				uni.navigateTo({
					url: "/pages/user/Register"
				})
			},
			status(validation) {
				return {
					error: validation.$error,
					dirty: validation.$dirty,
				};
			},

			//同步未登录前的购物车数据
			async updateCart() {
				if(this.shopList)
				updateCart({
					data: JSON.stringify(this.shopList)
				}).then();
			},

			//获取用户购物车数据
			getUserCart() {
				getUserCart().then((res) => {
					//同步未登录前数据
					this.updateCart();
					if (res[1].data.tag) {
						let shops = JSON.parse(res[1].data.data.data);
						for (let shop in shops) {
							this.syncCart(shops[shop]);
						}
					}
				});
			},

			//获取用户收藏数据
			getUserCollection() {
				getUserCollection().then((res) => {
					if (res[1].data.tag) {
						let collections = JSON.parse(res[1].data.data.data);
						for (let collection in collections) {
							this.syncCollection(collections[collection]);
						}
					}
				});
			},

			//获取用户浏览记录
			getUserViewed() {
				getUserViewed().then((res) => {
					if (res[1].data.tag) {
						let viewedGood = JSON.parse(res[1].data.data.data);
						for (let good in viewedGood) {
							this.syncViewed(viewedGood[good]);
						}
					}
				});
			},
		},

	};
</script>
<style lang="scss" scoped>
	.login_page {
		background-color: white;
		height: 100vh;
	}

	.logo {
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.btn-back {
		display: flex;
		width: 120rpx;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
		z-index: 11;

		image {
			height: 64rpx;
			width: 64rpx;
		}
	}

	#login_Btn {
		width: 90vw;
		height: 120rpx;
		border-radius: 70rpx;
		margin: 60rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: whitesmoke;
	}

	#register_Btn {
		margin: 0 auto;
		font-size: 26rpx;
		width: 90vw;
		text-align: right;
		color: gray;
		height: 80rpx;
		display: flex;
		justify-content: right;
		align-items: center;
	}

	.btn_active {
		background-color: rgb(252, 26, 0);
	}

	.btn {
		background-color: rgb(255, 188, 179);
		pointer-events: none;


	}

	.input {
		border-bottom: 2rpx solid silver;
		background: white;
		padding: 10rpx 20rpx;
		display: block;
		margin: 20rpx auto;
		width: 90vw;
		height: 90rpx;
		font-size: 40rpx;
		outline: none;
	}

	.dirty {
		border-color: #5a5;
		background: #efe;
	}

	.dirty:focus {
		outline-color: #8e8;
	}

	.error {
		border-color: red;
		background: #fdd;
	}

	.error:focus {
		outline-color: #f99;
	}
</style>
